<template>
    <div class="bar-chart-container">
        <div ref="chartRef" class="chart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "PurpleBarChart",
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.initChart();
        window.addEventListener("resize", this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
        this.chart && this.chart.dispose();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartRef);

            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                xAxis: {
                    type: "category",
                    data: ["西安", "咸阳", "榆林", "延安", "宝鸡", "汉中", "安康", "渭南", "商洛", "铜川", "韩城"],
                    axisLine: {
                        lineStyle: {
                            color: "#999",
                        },
                    },
                    axisTick: {
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        color: "#666",
                    },
                },
                yAxis: {
                    type: "value",
                    show: false, // 隐藏Y轴
                    min: 0,
                    max: 7,
                },
                series: [
                    {
                        name: "数值",
                        type: "bar",
                        barWidth: "15%", // 控制柱条宽度，数值越小柱条越细
                        data: [
                            { value: 74.72, itemStyle: { color: this.getGradientColor(6) } },
                            { value: 4.92, itemStyle: { color: this.getGradientColor(2) } },
                            { value: 4.66, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 3.54, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 4.40, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 2.76, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 1.47, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 1.73, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 1.12, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 0.52, itemStyle: { color: this.getGradientColor(1) } },
                            { value: 0.17, itemStyle: { color: this.getGradientColor(1) } },
                        ],
                        itemStyle: {
                            borderRadius: [15, 15, 0, 0], // 圆头效果
                            borderWidth: 0,
                        },
                        label: {
                            show: true,
                            position: "top",
                            color: "#8a2be2",
                            fontWeight: "bold",
                            formatter: "{c}",
                        },
                    },
                ],
                grid: {
                    left: "3%",
                    right: "3%",
                    bottom: "3%",
                    top: "15%",
                    containLabel: true,
                },
            };

            this.chart.setOption(option);
        },
        getGradientColor(value) {
            // 创建渐变紫色
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#b993d6" }, // 浅紫色
                { offset: 1, color: "#8a2be2" }, // 深紫色
            ]);
        },
        handleResize() {
            this.chart && this.chart.resize();
        },
    },
};
</script>

<style scoped>
.bar-chart-container {
    width: 100%;
    height: 400px;
}

.chart {
    width: 100%;
    height: 100%;
}
</style>